<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="top">
    <h1>翻译</h1>
    <p>中英互译</p>
</div>
<div class="main">
    <div class="one" id="one">
        <p>中文</p>
    </div>
    <div class="two" id="two">
        <p>英语</p>
    </div>
   <button class="san" onclick="mn()" style="cursor: pointer;">↔</button>
    <div class="si" id="si">
        <p>英语</p>
    </div>
    <div class="wu" id="wu">
        <p>中文</p>
    </div>

    <textarea class="leftin" id="yuan"></textarea>
    <textarea class="rightin" id="yi" placeholder="翻译"></textarea>

        <button class="fan" id="fan" onclick="up(1)" style="cursor:pointer;">翻译</button>
    
</div>
<script>
    var data_zh = ['你知道吗', '六月', '一日', '星期一', '是', '儿童节'];
    var data_en = ['do you know', 'June', 'One day', 'Monday', 'Yes', 'Children\'s day'];

    var lang = 'zh';

    function mn() {

        if (lang==='zh'){
lang = 'en';
        }else {
            lang = 'zh';
        }


               if(lang == 'zh'){
                   var one= document.getElementById("one");
                   one.style.backgroundColor='#5aaaff';
                   one.style.color='#fff';
                   var two= document.getElementById("two");
                   two.style.backgroundColor='#fafbfc';
                   var si= document.getElementById("si");
                   si.style.backgroundColor='#5aaaff';
                   si.style.color='#fff';
                   var wu= document.getElementById("wu");
                   wu.style.backgroundColor='#fafbfc';

               }else if (lang == 'en'){
                   var one= document.getElementById("one");
                   one.style.backgroundColor='#fafbfc';
                   one.style.color='#ccc';
                   var two= document.getElementById("two");
                   two.style.backgroundColor='#5aaaff';
                   var si= document.getElementById("si");
                   si.style.backgroundColor='#fafbfc';
                   si.style.color='#ccc';
                   var wu= document.getElementById("wu");
                   wu.style.backgroundColor='#5aaaff';

               }






    }


    function up(n) {
        if(n == 1){
            if(lang == 'zh'){
                var text = document.querySelector("#yuan").value;
                console.log(text);
                for(var i = 0;i<data_zh.length;i++) {
                    if (text==data_zh[i]){
                        document.querySelector("#yi").value = data_en[i];

                    }
                    if (text == data_en[i]){
                        mn();
                        document.querySelector("#yi").value = data_zh[i];
                    }
                }
            }else if(lang == 'en'){

                    var text = document.querySelector("#yuan").value;
                    for(var i = 0;i<data_en.length;i++) {
                        if (text==data_en[i]){
                            document.querySelector("#yi").value = data_zh[i];

                        }
                        if (text == data_zh[i]){
                            mn();
                            document.querySelector("#yi").value = data_en[i];
                        }
                    }

            }
            }
        }






</script>
</body>
</html>